<template>

    <section class="content">

        <div class="row">
            <div class="col-md-12">
                <button type="button" @click="createPost" class="btn btn-lg btn-primary btn-flat" style="margin-bottom: 15px;">
                    新增
                </button>
            </div>
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">用户列表</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover table-middle-td">
                            <tr>
                                <th class="text-center">头像</th>
                                <th>用户</th>
                                <th>昵称</th>
                                <th>邮箱</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="user in users">
                                <td><img class="user-list-img img-responsive img-circle" :src="user.avatar" alt="{{user.name}}"></td>
                                <td>{{user.name}}</td>
                                <td>{{user.username}}</td>
                                <td>{{user.email}}</td>
                                <td>{{user.status | status}}</td>
                                <td class="col-sm-3">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-success">
                                            修改
                                        </button>
                                        <button class="btn btn-danger" @click="disableUser()">禁用</button>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>
</template>

<script>
    export default {
        ready(){
            this.fetchUsers();
        },
        data () {
            return {
                // note: changing this line won't causes changes
                // with hot-reload because the reloaded component
                // preserves its current state and we are modifying
                // its initial state.
                users: []
            }
        },
        filters: {
            status(val){
                var status = "正常";
                switch (val) {
                    case 2:
                        status = "禁用";
                        break;
                    default:
                        break;

                }
                return status;
            }
        },
        methods: {
            fetchUsers(){
                this.$http({url: '/api/me/list', method: 'GET'}).then(function (resp) {
                    console.log(resp);
                    this.$set("users", resp.data.data);
                })
            },
            disableUser(){
                console.log();
            }
        }
    }
</script>

<style>
    body {
        font-family: Helvetica, sans-serif;
    }

    .table.table-middle-td tr > td {
        vertical-align: middle;
    }

    .user-list-img {
        margin: 0 auto;
        width: 40px;
        padding: 2px;
        border: 2px solid #d2d6de;
    }
</style>
